<template>
  <div class="m-dataLayout">
    <div class="m-searchListPanel">
      <div class="layout-1"><span class="leftLine"></span>消息列表</div>
    </div>
    <div class="m-dataList" id="m-tableList">
      <el-table
        :data="dataList"
        style="width: 100%"
        v-loading="dataListLoading"
        element-loading-text="loading..."
        ref="dataList"
        max-height="650"
        @filter-change="tableFilter"
      >
        <el-table-column
          prop="read"
          width="100"
          :filters="[{ text: '已读', value: '2' }, { text: '未读', value: '1' }]"
          columnKey="read"
          filter-placement="bottom-start"
          label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.read == '1' ? '未读' : '已读'}}</span>
            <span v-if="scope.row.read == '1'" class="readIcon"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createUser"
          label="发件人"
          width="120">
          <template slot-scope="scope">
            <span>System</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="theme"
          label="标题">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click="toFollowDetail(scope.row)">预约提醒:跟进项#{{scope.row.fid}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="notifyTime"
          label="预约提醒时间"
          width="160">
        </el-table-column>
      </el-table>
    </div>
    <div class="m-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes=pagination.pageSizeList
        :current-page=pagination.pageNo
        :page-size=pagination.pageSize
        layout="total, sizes, prev, pager, next"
        :total=pagination.total>
      </el-pagination>
    </div>
    <Comp-Follow-Up-Details :rowDetails="activeRow" :show.sync="showDetails"></Comp-Follow-Up-Details>
  </div>
</template>

<script>
  import * as Utils from '@/utils'
  import * as FollowUpAPI from '@/Api/followup';
  import CompFollowUpDetails from '@/components/CompFollowUpDetails.vue'
  export default {
    name: 'IndexMyNotice',
    data () {
      return {
        pagination: Utils.commonPagination(),
        dataList: [],
        dataListLoading:false,
        showDetails: false,
        activeRow: {},
        searchForm:{
          read:''
        }
      }
    },
    props: ['nowTab'],
    components: {
      CompFollowUpDetails
    },
    watch:{
      'nowTab'(val,oldval){
        if(val == 'notice') {
          this.dataList = JSON.parse(JSON.stringify(this.copyDataList))
        }
        if(oldval == 'notice') {
          this.dataList = [];
        }
        this.$refs.dataList.doLayout();
      }
    },
    methods: {
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      resetView(){
        this.dataList = [];
        this.$refs.dataList.clearFilter();
        this.searchForm= {
          read:''
        };
        this.pagination = Utils.commonPagination();
        this.queryList();
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.queryList();

      },
      tableFilter(data) {
        if(data.read.length == 1) {
          this.searchForm.read = data.read[0]
        } else  {
          this.searchForm.read = '';
        }
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      toFollowDetail(row){
        this.activeRow = {
          id: row.fid
        }
        this.showDetails = true;
        if (row.read != 1) {
          return;
        }
        FollowUpAPI.followImsgRead({
          id: row._id
        })
          .then(res => {
            if (res.code != 0) {
              this.$notify({
                title: '温馨提示',
                message: res.msg,
                type: 'warning'
              })
              return;
            }
            row.read = '2';
            let _num = 0;
            this.dataList.forEach(item => {
              if (item.read == '1') {
                _num += 1;
              }
            })
            this.$emit('noticeNum', _num)
          })
          .catch(error => {
            console.log(error)
          })
      },
      queryList(){
          this.dataListLoading = true;
        if (this.$refs.dataList) {
          this.$refs.dataList.bodyWrapper.scrollTop = 0;
        }
        FollowUpAPI.followImsgQuery(Object.assign({
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo
        },this.searchForm))
          .then(res => {
            this.dataListLoading = false;
            if (res.code != 0) {
              this.$notify({
                title: '温馨提示',
                message: res.msg,
                type: 'warning'
              })
              return;
            }
            this.dataList = res.data.content;
            this.pagination.total = res.data.totalElements
            this.copyDataList = JSON.parse(JSON.stringify(this.dataList));
            let _num = 0;
            res.data.content.forEach(item => {
              if (item.read == '1') {
                _num += 1;
              }
            })
            this.$emit('noticeNum', _num)

          })
          .catch(error => {
            this.dataListLoading = false;
            console.log(error)
          })
      }
    },
    created() {
      this.queryList();
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../scss/variables";
  .readIcon {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: $bg_A;
    border-radius: 50%;
    position: relative;
    top: -6px;
  }
</style>
